<template>
    <div id="app">
      <banner></banner>
      <div class="option">
            <span v-for="(item,index) in arr" :key="index" @click="currentIndex=index" :style="{color:currentIndex==index?'blue':''  }" :currentIndex="currentIndex">{{item}}</span>
        </div>
      <transition name="fade" mode="out-in">
        <keep-alive :max="3">
            <component :is="coms[currentIndex]"/>
        </keep-alive>
    </transition>
    </div>
    
  </template>
  
  <script>
  import banner from './components/baobaoBanner.vue';
  import list1 from './components/baobaoList.vue'; 
  import list2 from './components/baobaoList2.vue'; 
  export default {
      components: { 
        banner,
        list1,
        list2
       },
       data(){
        return {
          currentIndex:0,
          arr:['正在抢购','上新预告'],
          coms:['list1','list2'],
        }
       }
  }
  </script>
  
  <style lang="scss">
  *{
    margin:0; padding: 0;
  }
  .option{
        height: 30px;
        background: red;
    }
    .option span{
        color: white;
        margin: 20px;
    }
  </style>